<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '房客点评',
    enablePullDownRefresh: true,
  },
}
</route>

<template>
  <div class="evaluate-page">
    <LoadPage ref="loadPage" url="/hotels-info-app/open/scoring-page" :immediate="false">
      <template v-slot="{ list }">
        <div class="evaluate-list">
          <div class="card">
            <div class="score">
              <div class="num">{{ hotelInfo.score }}</div>
              <div class="info">
                <div class="text">分</div>
                <div class="text opacity-0">.</div>
              </div>
            </div>

            <div class="type" v-if="hotelInfo.scoreItems && hotelInfo.scoreItems.length > 0">
              <div class="item">
                <div class="text">
                  {{ hotelInfo.scoreItems[0].name }}
                  <span>{{ hotelInfo.scoreItems[0].score }}</span>
                </div>
                <div class="text" v-if="hotelInfo.scoreItems.length > 1">
                  {{ hotelInfo.scoreItems[1].name }}
                  <span>{{ hotelInfo.scoreItems[1].score }}</span>
                </div>
              </div>
              <div class="item" v-if="hotelInfo.scoreItems.length > 2">
                <div class="text">
                  {{ hotelInfo.scoreItems[2].name }}
                  <span>{{ hotelInfo.scoreItems[2].score }}</span>
                </div>
                <div class="text" v-if="hotelInfo.scoreItems.length > 3">
                  {{ hotelInfo.scoreItems[3].name }}
                  <span>{{ hotelInfo.scoreItems[3].score }}</span>
                </div>
              </div>
              <div class="item" v-if="hotelInfo.scoreItems.length > 4">
                <div class="text">
                  {{ hotelInfo.scoreItems[4].name }}
                  <span>{{ hotelInfo.scoreItems[4].score }}</span>
                </div>
                <div class="text" v-if="hotelInfo.scoreItems.length > 5">
                  {{ hotelInfo.scoreItems[5].name }}
                  <span>{{ hotelInfo.scoreItems[5].score }}</span>
                </div>
              </div>
            </div>
          </div>

          <div class="evaluate">
            <UserEvaluate v-for="(item, index) in list" :data="item" :key="index" />
          </div>
        </div>
      </template>
    </LoadPage>
  </div>
</template>

<script lang="ts" setup>
import UserEvaluate from '../components/UserEvaluate'

// 上拉加载
const loadPage = ref()
const hotelInfo = reactive<any>({})
let hotelId = ''
onLoad((query) => {
  if (query && query.id) {
    hotelId = query.id
  }
})

onMounted(() => {
  loadPage.value.getData({ hotelId }, true)

  http
    .get('/hotels-info-app/open/detail', {
      id: hotelId,
    })
    .then((res: any) => {
      Object.assign(hotelInfo, res)
    })
})

onReachBottom(() => {
  loadPage.value.getMore({ hotelId })
})

// 下拉刷新
onPullDownRefresh(() => {
  loadPage.value.getData({ hotelId }, true)
})
</script>

<style lang="scss" scoped>
.evaluate-page {
  box-sizing: border-box;
  min-height: 100vh;
  background-color: var(--bgc4);

  .evaluate-list {
    box-sizing: border-box;
    padding: 26rpx 30rpx;

    .card {
      display: flex;
      align-items: center;
      height: 146rpx;
      background-color: #fff;
      border-radius: 30rpx;
      .score {
        display: flex;
        flex: 1;
        align-items: center;
        padding: 0 23rpx;
        .num {
          font-size: 92rpx;
          font-weight: 700;
          line-height: 108rpx;
          letter-spacing: 0;
        }
        .info {
          margin-left: 4rpx;
          .text {
            font-size: 23rpx;
            line-height: 40rpx;
            color: var(--color2);
          }
        }
      }

      .type {
        display: flex;
        padding: 0 12 rpx;
        .item {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 62rpx;
          padding: 0 36rpx;
          @include border-right(#dfe3e6);
          &:last-child {
            @include border-right(transparent);
          }
          .text {
            font-size: 20rpx;
            line-height: 23rpx;
            color: var(--color4);
            span {
              font-weight: 700;
              color: var(--color1);
            }
          }
        }
      }
    }

    .evaluate {
      margin-top: 26rpx;
      background: #fff;
      border-radius: 30rpx;
      :deep(.user-evaluate) {
        padding: 38rpx 0;
        margin: 0 30rpx;
        @include border-bottom(#e6ecf0);
      }
    }
  }
}
</style>
